<template>
    <!-- background-color="#545c64"
    text-color="#fff"20vh
    active-text-color="#ffd04b" -->
  <el-menu
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    :default-active="activeIndex"
    :ellipsis="false"
  >
    <div style="flex-grow: 1;" ></div>
    <div  style="  font-size: 18px;color: rgb(51, 126, 204); margin: 7.5px 0 7.5px 0 ;">
       <img style="width: 42px; height: 42px ; margin: 0 15px;"  src="@/assets/logo/logo.png" alt="" />
       <p style="text-align: center;margin: 0;">校园论坛</p>
    </div>
    <!-- <div style="width: 5vh;"></div> -->
    <div style="flex-grow: 0.25;" ></div>
    <el-menu-item index="1" class="forumForAll" >本校校园论坛</el-menu-item>
    <el-menu-item index="2" class="forumForMy">全国校园论坛</el-menu-item>
    <div class="flex-grow" />
    <!-- <div style="width: 63vh;" /> -->
    <!-- <div style="margin: 12.5px 100px 12.5px 0; ">
      <el-avatar :size="75" :src="(image != '' && image != null)?image:''" style="font-size: 25px;">{{ (image != '' && image != null)?'':name }}</el-avatar>
    </div> -->
    <el-dropdown style="">
      <div style="margin: 5px 0 5px 0; border-radius: 32.5px;" >
        <el-avatar :size="65" :src="(image != '' && image != null)?image:''" style="font-size: 20px; border: 1px solid rgb(64, 158, 255);color: rgb(51, 126, 204);">{{ (image != '' && image != null)?'':name }}</el-avatar>
      </div>
      <template #dropdown>
        <el-dropdown-menu style="color: rgb(160, 207, 255);">
          <el-dropdown-item @click.prevent = "personPage()" style="color: rgb(121, 187, 255);">个人主页</el-dropdown-item>
          <el-dropdown-item @click.prevent = "loginOut()" style="color: rgb(121, 187, 255);">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <div style="flex-grow: 1;" ></div>
  </el-menu>
  
</template>

<script>
import userStore from '@/store/modules/user'
import { ElMessage } from 'element-plus'
import usePostStore from '@/store/forum/post';
import useUserStore from '@/store/modules/user';

export default {
  name: 'NavigationBar',
  data(){
    return {
      // activeIndex : '1',
      // image: require('@/assets/images/profile.jpg')
    };
  },
  computed:{
    activeIndex (){
      return usePostStore().changeTab;
    },
    image(){
      return useUserStore().avatar;
    }
  },
  props:{
    name: {
      type: String,
      // required: true,
      default: "user"
    }
  },
  methods:{
    handleSelect (key, keyPath) {
      // console.log(key, keyPath);
      usePostStore().changeTab = ''+key;
      if(key==1){
        this.$router.push("/local")
      }else if(key==2){
        this.$router.push("/all")
      }
    },
    loginOut(){
      // console.log(this.$router)
      // console.log(this.$route)
      userStore().logOut().then(() => {
        ElMessage({
          message: "登出成功。",
          type: "success"
        })
        this.$router.push({path:"/login"}).then(()=>{
          ElMessage({
            message: "登录跳转成功。",
            type: "success"
          })
        }).catch(err=>{
          console.log(err)
        });

      }).catch(err=>{
        ElMessage.error("登出失败。");
        this.$router.push({path:"/login"}).then(()=>{
          ElMessage({
            message: "登录跳转成功。",
            type: "success"
          })
        }).catch(err=>{
          console.log(err)
        });
      })
    },
    personPage(){
      this.$router.push("/person")
    }
  }
}
</script>

<style  scoped lang="scss">
.el-menu-popper-demo {
  background-color: #545c64
}
.el-menu-demo {
  height: 75px;
  font-size: 18px;
  .forumForAll {
    font-size: 20px;
    // display: flex; 
    // flex-shrink: 2 ;
  }
  .forumForMy {
    font-size: 20px;
    // display: flex; 
    // flex-shrink: 2 ;
  }
}
.flex-grow {
  flex-grow: 3;
}
</style>